<template>
	<div class="unused-coupon-container">
		<!-- 未使用优惠券列表-->
    <ul class="unused-coupon"  v-if="unusedCoupons.coupons.length>0">
      <van-list
          v-model="loading"
          :finished="finished"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          finished-text=""
          @load="onLoad"
        >
        <li v-for="(couponItem,index) in unusedCoupons.coupons" :key="index" class="coupons-li">
          <div class="coupons-item">
            <section :class="couponItem.not_start?'coupons-box coupon-notstart':'coupons-box'">
              <section class="coupon-left">
                <!-- <h1 class="coupon-price fontGilroy" :data-price="couponItem.value"><span>¥</span>{{couponItem.value}}</h1> -->
                <h1 v-if="couponItem.promotion_type==1" class="coupon-price">{{couponItem.value}}<span class="txt">折</span></h1>
                <h1 v-else class="coupon-price" v-html="scaleGoodsPriceFn(couponItem.value)"></h1>
                <div v-if="couponItem.coupon_type!=3">
                  <p v-if="couponItem.at_least>0">满{{couponItem.at_least}}元使用</p>
                  <p v-else>不限订单金额</p>
                </div>
              </section>
              <section class="coupon-right">
                <section class="coupon-l">
                  <div class="name">
                    <h4>{{couponItem.title}}</h4>
                    <p>{{couponItem.start_time}} 至 {{couponItem.end_time}}</p>
                  </div>
                  <span class="explain">仅在有效时间内使用</span>
                </section>
                <section class="coupon-r">
                  <van-button class="btn" @click="Jump('shareCoupon',{ id: couponItem.user_coupon_id })" v-if="couponItem.is_share==1"  color="linear-gradient(to right, #F82337, #FF2D59)" round >送给TA</van-button>
                  <van-button class="btn" @click="Jump('couponVerify',{itemId:couponItem.user_coupon_id})"  v-else-if="couponItem.barcode && unusedCoupons.is_verify_coupon==1" color="#F30C23" plain hairline round type="primary">核销</van-button>
                  <van-button class="btn" @click="clickOpenCouponPack(couponItem.user_coupon_pack_id)" v-else-if="couponItem.coupon_type==3 && !couponItem.not_start" color="linear-gradient(to right, #F82337, #FF2D59)" round >立即打开</van-button>
                  <van-button class="btn" @click="linkTo(couponItem.coupon_url)" v-if="!couponItem.not_start && couponItem.is_share != 1" color="linear-gradient(to right, #F82337, #FF2D59)" round >立即使用</van-button>
                </section>
              </section>
            </section>
          </div>
          <div class="coupon-tip" v-if="couponItem.description">{{couponItem.description}}</div>
        </li>
      </van-list>
    </ul>
    
    <div v-else>
      <no-data :noData=noData></no-data>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
import { getMyCoupon, openCouponPack } from '@/api/user/member/memberApi'
import { scaleGoodsPrice } from '@/utils/index'
// import { priceFont } from '@/utils/index'
import small from '@/smallapp/small'
import noData from '@/components/noData/index'

export default Vue.extend({
  components: {
    noData
  },
  props: {
    unusedCoupons: {
      type: Object
      /* default: {
        ftitle_coupon_name: '',
        is_verify_coupon: '',
        coupons: [
          {
            not_start: '',
            value: '22',
            coupon_type: '1',
            at_least: '2',
            title: '优惠券名称',
            start_time: '2019-01-01',
            end_time: '2019-10-10',
            barcode: '1',
            couponverify_link: '',
            is_share: 0,
            link_share: '',
            user_coupon_pack_id: '',
            description: '优惠券描述'
          }
        ]
      } */
    }
  },
  data() {
    return {
      noData: {
        img: 'https://img.wifenxiao.com/small-wfx/images/no-coupon.png',
        text: '暂无优惠券',
        marginTop: '80px'
      },
      loading: false,
      finished: false,
      error: false,
      p: 2
    }
  },
  methods: {
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    linkTo(link) {
      openPage(link)
      // window.location.href = link
    },
    // 价格小数点前变大
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className, 1)
    },
    // 打开大礼包
    clickOpenCouponPack(id) {
      const params = { coupon_pack_id: id }
      openCouponPack(params).then((res) => {
        if (res.status == 1) {
          this.$Error('操作成功')
          window.reload()
        } else {
          this.$Error(res.msg)
        }
      })
    },
    onLoad(first) {
      // TODO first有值时代表第一次加载
      if (first) {
        this.p = 1
        this.finished = true
      }
      if (this.finished) return false
      this.loading = true
      const data = {
        p: this.p,
        type: 1
      }
      getMyCoupon(data)
        .then((res) => {
          this.loading = false
          if (res.data.no_use.length) {
            this.unusedCoupons.coupons.push(...res.data.no_use)
            this.p++
          } else {
            this.finished = true
          }
        })
        .catch(() => {
          this.error = true
        })
    }
  }
})
</script>

<style lang="scss">

</style>
